<script setup lang="ts">
import { getDataNames, importTable, listDbTable } from '@/api/tool/gen'
import type { DbTableQuery, DbTableVO } from '@/api/tool/gen/types'

type Key = string | number
const emit = defineEmits(['ok'])
const message = useMessage()
const total = ref(0)
const visible = ref(false)
const dbTableList = ref<Array<DbTableVO>>([])

const state = reactive<{
  selectedRowKeys: Key[]
  loading: boolean
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
})
const queryParams = reactive<DbTableQuery>({
  pageNum: 1,
  pageSize: 10,
  dataName: '',
  tableName: '',
  tableComment: '',
})
const dataNameList = ref<Array<string>>([])

/** 查询参数列表 */
function show(dataName: string) {
  getDataNameList()
  if (dataName)
    queryParams.dataName = dataName
  else
    queryParams.dataName = 'master'

  getList()
  visible.value = true
}
/** 查询表数据 */
async function getList() {
  const res = await listDbTable(queryParams)
  dbTableList.value = res.rows
  total.value = res.total
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  handleQuery()
}
/** 导入按钮操作 */
async function handleImportTable() {
  const tableNames = state.selectedRowKeys.join(',')
  if (tableNames === '') {
    message.error('请选择要导入的表')
    return
  }
  const res = await importTable({ tables: tableNames, dataName: queryParams.dataName })
  message.success(res.msg)
  if (res.code === 200) {
    visible.value = false
    emit('ok')
  }
}
/** 查询多数据源名称 */
async function getDataNameList() {
  const res = await getDataNames()
  dataNameList.value = res.data
}

function customerRow(record: DbTableVO, index: number) {
  console.log(record, index)
  return {
    onClick: () => {
      state.selectedRowKeys.push(record.tableName)
    },
  }
}

function onSelectChange(selectedRowKeys: Key[]) {
  state.selectedRowKeys = selectedRowKeys
}

defineExpose({
  show,
})
</script>

<template>
  <!-- 导入表 -->
  <a-modal v-model:open="visible" :mask-closable="false" :keyboard="false" title="导入表" width="1100px" top="5vh" append-to-body>
    <a-form :model="queryParams" layout="inline">
      <a-form-item label="数据源" prop="dataName">
        <a-select v-model:value="queryParams.dataName" filterable placeholder="请选择/输入数据源名称" style="width: 200px">
          <a-select-option v-for="item in dataNameList" :key="item" :label="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="表名称" prop="tableName">
        <a-input v-model:value="queryParams.tableName" placeholder="请输入表名称" clearable @keyup.enter="handleQuery" />
      </a-form-item>
      <a-form-item label="表描述" prop="tableComment">
        <a-input v-model:value="queryParams.tableComment" placeholder="请输入表描述" clearable @keyup.enter="handleQuery" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" class="mr-10px" @click="handleQuery">
          搜索
        </a-button>
        <a-button @click="resetQuery">
          重置
        </a-button>
      </a-form-item>
    </a-form>
    <div class="mt-20px">
      <a-table :data-source="dbTableList" :pagination="false" height="260px" row-key="tableName" :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" :custom-row="customerRow">
        <a-table-column data-index="tableName" title="表名称" :ellipsis="true" />
        <a-table-column data-index="tableComment" title="表描述" :ellipsis="true" />
        <a-table-column data-index="createTime" title="创建时间" />
        <a-table-column data-index="updateTime" title="更新时间" />
      </a-table>
      <div class="text-right mt-10px">
        <a-pagination
          v-show="total > 0"
          v-model:current="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" size="small" :total="total"
          show-less-items @change="getList"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer mt-20px">
        <a-button type="primary" @click="handleImportTable">
          确 定
        </a-button>
        <a-button @click="visible = false">
          取 消
        </a-button>
      </div>
    </template>
  </a-modal>
</template>
